<template>
  <view class="login-container">
    <!-- 提示登陆的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <!-- 登陆按钮 -->
    <button class="btn-login" type="primary" @click="wxlogin">
      一键登陆
    </button>
    <!-- 登陆提示 -->
    <view class="tips-text">登陆尽享受更多权益</view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      token:
        'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjU0LCJpYXQiOjE2Mjg1ODM2NzQsImV4cCI6MTAwMTYyODU4MzY3M30.KOMfyXjb3Ni6W1Bwdbm5qYDc9JonNPNkvpbU9WdodH8'
    }
  },
  computed: {
    ...mapGetters('user', ['getNavUrl'])
  },
  methods: {
    ...mapMutations('user', ['setUserInfo', 'setToken']),
    async wxlogin () {
      // 1、获取用户信息
      // getUserProfile 获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo
      // 弹出一个微信授权框 允许 拒绝
      const [err, result] = await uni.getUserProfile({
        desc: '为了更好的给你提供服务'
      })
      // 点击 拒绝 打印 err {errMsg: "getUserProfile:fail auth deny"}
      // 点击允许打印 err null
      // console.log('err', err)
      // 点击允许打印 获取到的用户信息
      // 点击 拒绝 打印 result undefined
      console.log('result', result)
      // !err取反说明有用户信息,代码继续往下执行
      if (!err) {
        // 111,把用户信息存储仓库中，为了用户信息页面渲染提供数据
        // 通过上面的打印的 result能获取到用户的信息
        // 先把用户信息解构出来,
        const { userInfo, encryptedData, iv, rawData, signature } = result
        this.setUserInfo(userInfo)

        // // 2、获取登录的临时的 code
        // const [err, res] = await uni.login()
        // 打印出来里面有code
        // console.log('res', res)

        // // 3、发请求登录，然后获取token（企业微信才能实现效果）
        // 下面这些参数是后台定义好的,,,所以上面必须全部都获取到
        // const res2 = await uni.$request({
        //   url: 'users/wxlogin',
        //   method: 'POST',
        //   data: {
        //     encryptedData,
        //     iv,
        //     rawData,
        //     signature,
        //     code: res.code
        //   }
        // })
        // console.log('res2',res2) // 打印后能得到获取的token
        // if (res2.meta.status === 200) {
        //   // 提示登录成功
        //   uni.showToast({
        //     title: '登陆成功',
        //     icon: 'success',
        //     mask: true
        //   })
        //   // 把token保存到仓库中
        //   this.setToken(res2.message.token)
        //   // 跳转到登录之前来的页面（如果有）
        //   if (this.getNavUrl) {
        //     // switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
        //     uni.switchTab({ url: this.getNavUrl })
        //   }
        // }

        // ---------------------------------------------------------------------------------------------
        // 这是用企业微信登陆成功后获取的token,,,现在放在data中,所以才可以这么用
        if (this.token) {
          // 提示登录成功
          uni.showToast({
            title: '登陆成功',
            icon: 'success',
            mask: true,
            duration: 1000
          })
          // 把token保存到仓库中
          this.setToken(this.token)
          // 跳转到登录之前来的页面（如果有）
          if (this.getNavUrl) {
            // 目前有一个bug, 如果这里不用定时器的话,,,页面直接跳转了,不出现提示登陆成功,
            // 加一个定时器就能解决这个小bug
            setTimeout(() => {
              uni.switchTab({ url: this.getNavUrl })
            }, 1000)
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
